/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component,} from 'react';
import { StyleSheet, Text, View,Modal,Image,FlatList,TouchableOpacity,ScrollView,Animated,ActivityIndicator as MActivityIndicator} from 'react-native';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { scaleSize } from '../../utils/screen';
import FontText, {fontFamily} from '../components/FontText';
import { Toast,ActivityIndicator } from "antd-mobile-rn";
import {i18n} from '../../i18n';
import {getItem} from "../../utils/sqlitestore.js";
import * as selfordingActions from '../../actions/selfordingActions';
import {IMGCACHEPATH} from '../../utils/downImgUtils';
var Dimensions = require('Dimensions');
import SwiperCard,{Event as CardEvent} from '../../utils/swipercard';
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;
import { Base64 } from 'js-base64';
class MenuC extends Component {
  constructor(props) {
    super(props);
    this.state = {
      payPop:new Animated.Value(0),
      connected:false,
      creditpaying:false,
      name:"",
      orderId:""
    }
  }
  componentWillMount(){
    this.props.getItem('app_data');
    this.props.getList();
    this.onDataReceivedListner = CardEvent.addListener("onDataReceived",(res)=>this.onDataReceived(res));
    this.onDeviceConnectionDidChangeListner = CardEvent.addListener("onDeviceConnectionDidChange",(res)=>this.onDeviceConnectionDidChange(res))
  }
  componentWillUnmount(){
    this.onDataReceivedListner.remove();
    this.onDeviceConnectionDidChangeListner.remove();
  }
  setModalVisible(visible,name){
    this.props.setModalVisible(visible,name)
  }
  onDeviceConnectionDidChange(res){
    let {isDeviceOpenend, isDeviceConnected} = res;
    if(isDeviceOpenend,isDeviceConnected){
      this.setState({
        connected:true
      })
    }else{
      this.setState({
        connected:false
      })
      if(isDeviceOpenend && !isDeviceConnected){
        this.connectSwiper();
      }
    }
  }
  onDataReceived(res){
    if(res.magstripe){
      let {payOrder} = this.props;
      let {name,orderId} = this.state;
      this.setState({
        creditpaying:true
      },()=>{
        payOrder({
          extaData:{
            magstripe:`enc://${Base64.encode(res.magstripe)}`
          },
          name:name,
          orderId:orderId
        },(isSuccess)=>{
          if(isSuccess){
            this.tagglePop(false);
          }
          this.setState({
            creditpaying:false
          })
        })
      })
      
    }
  }
  Changeindex(obj){
    this.props.Changeindex(obj);
  }
  Tapgoods(item){
    this.props.Tapgoods(item);
  }
  skuselected(option_id,value_id,idx,index,selected){
    this.props.skuselected(option_id,value_id,idx,index,selected);
  }
  CartNum(count,type){
    this.props.CartNum(count,type);
  }
  changeCartnum(cartItem,type){
    this.props.changeCartnum(cartItem,type);
  }
  Addcart(){
    this.props.Addcart();
  }
  delCartitem(cartItem){
    this.props.delCartitem(cartItem);
  }
  diningType(name){//就餐方式
    this.props.diningType(name);
  }
  payType(name){//选择的支付方式
    let {placeOrder,payOrder} = this.props;
    placeOrder(name,(orderId)=>{
      if(name == "cash"){
        payOrder({name,orderId});
      }else{
        this.setState({
          name,
          orderId
        })
        this.tagglePop(true);
      }
    });
  }
  render() {
    let {payPop} = this.state;
    let {
      categoryArr,storeinfo,detailInfo,
      checkoutmodel,modalVisible,
      loading,topage,count,cartArr,
      totalPrice,totalTax,combined,
      paytype,diningtype,
      placeloading
    } = this.props.selfcart;
    return (
      <View style={[styles.container,styles.bgff,styles.flexcenter]}>
        <View style={[styles.herders,styles.flexr,styles.flexb,styles.flexx]}>
           <View style={[styles.flexr,styles.flexx]}>
            <View style={[styles.circle,styles.bg72]}></View>  
            <Text style={[styles.color72,styles.ftmedium,{lineHeight:scaleSize(80)}]}>{storeinfo.name&&storeinfo.name.value}</Text>
           </View>
           <View style={[styles.flexr,styles.flexx]}  >
             <Image style={styles.addressimg} source={require('../../access/imgs/address.png')}/>
             <Text style={[styles.color72,styles.ftbook,{lineHeight:scaleSize(80)}]}>{}</Text>
             <Image style={styles.phoneimg} source={require('../../access/imgs/phone.png')}/>
             <Text style={[styles.color72,styles.ftbook,{lineHeight:scaleSize(80)}]}>{}</Text>
          </View>     
        </View>
        <TouchableOpacity
          activeOpacity = {0.8}
          onPress = {() => { this.setModalVisible(true,'checkoutmodel') }  } 
          style = {[styles.checkoutbtn,styles.flexcenter,checkoutmodel ? styles.bgbf:styles.bg5d]}>
                  <Text style={[styles.colorff,styles.ft36,styles.ftmedium,{lineHeight:scaleSize(100),fontWeight:'600'}]}>{i18n.t("Selfording.checkout")} {checkoutmodel ? "": <Text>{"$"+(combined||"0.00")}</Text>}</Text>          
        </TouchableOpacity>  

        <ScrollableTabView
            style={[styles.bgff]}
            // styles.viewscroll,
            renderTabBar={(e) => this.renderTabBar(e)}
            page={topage}
            tabBarBackgroundColor='#f8f8f8'
            tabBarActiveTextColor='#fd265d'
            tabBarInactiveTextColor='#aaa'
            scrollWithoutAnimation={false}
            tabBarTextStyle={[styles.ftmedium,styles.ft36]}
            tabBarUnderlineStyle={[styles.lineStyle, topage==categoryArr.length-1 ? styles.bgff:styles.bg5d]}
            tabBarActiveTextColor='#FF0000'
            onChangeTab={(obj) => {this.Changeindex(obj)}}>
            {categoryArr.map((items, idx) => {return (
            <View  style={[styles.flex1]} tabLabel={items.name||""} key={idx}>
              { idx==categoryArr.length-1 ? <View  style={[styles.checkoutmodelbox,styles.flex1]}>
               <View style={[styles.flexr,styles.flex1,styles.pd40,styles.bgff,{paddingRight:scaleSize(0)}]}>
                <View style={[styles.flex1,styles.pd50,styles.bgf8,{paddingBottom:0,paddingLeft:0,paddingRight:0}]}>
                    <View style={[styles.flex1]}> 
                    {cartArr.length ?
                      <ScrollView style={[styles.flex1,{paddingBottom:scaleSize(60),paddingLeft:scaleSize(50),paddingRight:scaleSize(50),overflow:'scroll'}]}>
                          {(cartArr).map((item,k)=>{
                            return (
                            <View  style={[styles.flexc,{marginTop:scaleSize(40),marginBottom:scaleSize(26)}]} key={`${item.name}_${k}`}>
                               <View style={[styles.flexr,styles.flexb,styles.flexx]}>
                                <Text style={[styles.color50,styles.ft36,styles.ftbook]}>{item.name}</Text>
                                <View style={[styles.flexr,styles.flexx,styles.flexb,{width:scaleSize(620)}]}> 
                                    <View style={[styles.onebtnbox,styles.flexcenter,styles.numbercolor,styles.bgee,styles.btnnum]}>
                                        <TouchableOpacity
                                          activeOpacity = {0.8}
                                          style={styles.ft36}
                                          onPress = {this.changeCartnum.bind(this,item,"reduction")}>
                                          <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                                           <Image style={{width:scaleSize(22),height:scaleSize(2)}} source={require('../../access/imgs/reduction.png')}/>
                                          </View>
                                        </TouchableOpacity>
                                            <Text style={[styles.ft30,styles.flexy,styles.ftmedium,{color:'#000',width:scaleSize(100),textAlign:'center',lineHeight:scaleSize(80)}]}>{item.count}</Text>
                                        <TouchableOpacity
                                          activeOpacity = {0.8}
                                          style={styles.ft36}
                                          onPress = {this.changeCartnum.bind(this,item,"add")}>
                                        <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                                          <Image style={{width:scaleSize(22),height:scaleSize(22)}} source={require('../../access/imgs/add.png')}/>
                                        </View>
                                        </TouchableOpacity>
                                    </View>
                                    <Text style={[styles.ft36,styles.ftbook]}>${item.price}</Text>
                                    <TouchableOpacity
                                          activeOpacity = {0.8}
                                          onPress = {this.delCartitem.bind(this,item)}>
                                    <Image style={{width:scaleSize(38),height:scaleSize(41)}} source={require('../../access/imgs/deltel.png')}/>
                                    </TouchableOpacity>
                                </View>
                              </View>
                              <View style={[styles.flexc,{paddingLeft:scaleSize(35)}]}>
                                {item.options.map((optitem,idx)=>{
                                      return (
                                        optitem.values.map((itemval,ids)=>{
                                            var html=<Text style={{height:0}} key={`${itemval.name}_${ids}`}></Text>;
                                            if(itemval.selected){
                                              var html= <Text style={[styles.color66,styles.ft30,styles.ftbook,{paddingTop:scaleSize(10),height:scaleSize(50)}]} key={`${itemval.name}_${ids}`}>
                                              {itemval.name}  {itemval.price ? <Text style={[styles.color5d,styles.ftbook]}>{itemval.price_prefix}${itemval.price}</Text>:''}   
                                              </Text>
                                            }
                                          return(
                                            html
                                          )})
                                        )
                                        })
                                      }
                                </View>
                              </View>
                            )})}
                      </ScrollView>:<Text style = {[styles.flex1,styles.emptyText]}>Empty!</Text>}
                    </View>

                    <View style={[styles.checkmodelfooter,styles.flexr,styles.flexb]}>
                     <View></View>
                     <View style={[styles.flexb,styles.flexr,{width:scaleSize(654),paddingTop:scaleSize(20),paddingRight:scaleSize(200)}]}>
                        <View style={[styles.flexy,{width:scaleSize(160)}]}>

                        <Text style={[styles.color99,styles.h60,styles.ft36,styles.ftbook]}>{i18n.t("Selfording.subtotal")}:</Text> 
                        <Text style={[styles.color99,styles.h60,styles.ft36,styles.ftbook]}>{i18n.t("Selfording.tax")}: </Text> 
                        <Text style={[styles.color21,styles.h60,styles.ft36,styles.ftbook]}>{i18n.t("Selfording.total")}:</Text> 

                        </View>
                        <View > 
                          <Text style={[styles.color99,styles.h60,styles.ft36,styles.ftbook,{textAlign:"right",lineHeight:scaleSize(60)}]}>${totalPrice||"0.00"} </Text> 
                          <Text style={[styles.color99,styles.h60,styles.ft36,styles.ftbook,{textAlign:"right",lineHeight:scaleSize(60)}]}>${totalTax||"0.00"}</Text> 
                          <Text style={[styles.color21,styles.h60,styles.ft36,styles.ftbook,{textAlign:"right",lineHeight:scaleSize(60),fontWeight:"500"}]}>${combined||"0.00"}</Text>  
                        </View>
                     </View>
                    </View>
                </View>
                <View style={[{width:scaleSize(644)},styles.flexx,styles.pt50]} >
                    <View style={[styles.flexr,styles.flexcenter,{paddingBottom:scaleSize(115)}]}>
                       <TouchableOpacity
                        activeOpacity = {0.8}
                        style={[styles.onebtnbox,styles.flexcenter,styles.bgff,styles.btnpadding,{marginRight:scaleSize(40),borderColor: diningtype=='dine-in' ? '#fd265d' :'#9b9b9b'}]}
                        onPress = {()=>{
                          this.diningType('dine-in')
                        }}>
                          <Text style={[ diningtype=='dine-in' ? styles.color5d :styles.color9d ,styles.ft30,styles.ftbook,{lineHeight:scaleSize(80)}]} >{i18n.t("Selfording.dinein")}</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        activeOpacity = {0.8}
                        style={[styles.onebtnbox,styles.flexcenter,styles.bgff,styles.btnpadding,{borderColor: diningtype=='take-out' ? '#fd265d' :'#9b9b9b'}]}
                        onPress = {()=>{
                          this.diningType('take-out')
                        }}>
                          <Text style={[diningtype=='take-out' ? styles.color5d :styles.color9d ,styles.ft30,styles.ftbook,{lineHeight:scaleSize(80)}]} >{i18n.t("Selfording.takeout")}</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={[styles.ft48,styles.color50,styles.ftbook,{height:scaleSize(100)}]}>{i18n.t("Selfording.howtopay")}</Text>

                    <View style={[styles.onebtnbox,styles.flexcenter,styles.cardbtn,styles.btnpadding]}>
                      <TouchableOpacity
                        activeOpacity = {0.8}
                        onPress = {()=>{
                          this.payType('credit-card')
                        }}>
                        {
                          placeloading?
                          <MActivityIndicator color = {"#fff"} />
                          :<Text style={[styles.ft48,styles.colorff,styles.ftbook,{lineHeight:scaleSize(102)}]}>{i18n.t("Selfording.creditcard")} </Text>
                        }
                      </TouchableOpacity>
                    </View>
                    <View style={[styles.flexcenter,{height:scaleSize(90)}]}>
                      <Text style={[styles.ft36,styles.color50,styles.ftmedium]}>{i18n.t("Selfording.or")}</Text>
                    </View>
                    
                    <View style={[styles.onebtnbox,styles.flexcenter,styles.cardbtn,styles.btnpadding]}>
                      <TouchableOpacity
                          activeOpacity = {0.8}
                          onPress = {()=>{
                            this.payType('cash')
                          }}>
                          {
                            placeloading?
                            <MActivityIndicator color = {"#fff"} />
                            :<Text style={[styles.ft48,styles.colorff,styles.ftbook,{lineHeight:scaleSize(102)}]}>{i18n.t("Selfording.cash")}</Text>
                          }
                        </TouchableOpacity>
                      </View>
                </View>

               </View>
              

            </View>:<FlatList
              numColumns = {4}
              data = {categoryArr[idx]&&categoryArr[idx].products}
              style = {[styles.flex1]} 
              renderItem = {({item,index})=>this.renderItem(item,index)}/>
                
              }
            </View>
           )})}
        </ScrollableTabView>
        <ActivityIndicator 
          toast
          animating = {loading}
          text = {i18n.t("Selfording.loadings")}
          />
        <Modal
          animationType='slide'
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => { this.setModalVisible(false,'modalVisible') } }
          >
          <View style={[styles.container,styles.flexcenter,{backgroundColor:'rgba(0, 0, 0, 0.2)'}]}>
            <View style={[styles.innerContainer,styles.bgff]}>
              <View style={[styles.contbox,styles.flexcenter]}>
                  <View style={styles.goodsinfo}>
                      <Image  style={styles.seltelimg} source={{uri:`file://${IMGCACHEPATH}${detailInfo.gallery&&detailInfo.gallery.main.name}`}}/>
                      <View style={{flex:1}}>
                      <Text style={[styles.ft48,styles.color50,styles.ftbook,{marginBottom:scaleSize(25)}]}>{detailInfo.name}</Text>        
                        <Text style={[styles.ft40,styles.ftmedium,{marginBottom:scaleSize(60)}]}>{"$"+detailInfo.price}</Text> 
                        <Text style={[styles.ft24,styles.color66,styles.ftlight]}>{detailInfo.description}</Text> 
                      </View>
                  </View>
                    
                  {  detailInfo.options.length==0 ? null:
                    <ScrollView style={{paddingBottom:scaleSize(60),height:ScreenHeight-scaleSize(560),overflow:'scroll',width:scaleSize(1500)}}>
                        {detailInfo.options.map((v,k)=>{
                          return (
                            <View key={k}>
                              <View style={[styles.flexy,styles.h60,{borderBottomColor:'#eee',borderBottomWidth:scaleSize(1),borderStyle:'solid'}]} >
                                <Text style={[styles.ft30,styles.color9d,styles.ftlight,{fontWeight:'200'}]}>{v.name}</Text>
                              </View>
                              <View style={{flexDirection:'row',flexWrap:'wrap'}}>
                              {v.values.map((s,j)=>{
                                  return(
                                    <View key={j}>
                                        <TouchableOpacity
                                        activeOpacity = {0.8}
                                        onPress = {this.skuselected.bind(this,s.option_id,s.value_id,k,j,s.selected)}>
                                        <View style={[styles.onebtnbox,styles.flexcenter,styles.nosektel,(s.selected ? styles.bg72:styles.bgee)]} >
                                          <Text style={[ (s.selected ? styles.colorff: styles.color50),styles.ft30,styles.ftbook,{lineHeight:scaleSize(80)}]} >{s.name}</Text>
                                        </View>
                                      </TouchableOpacity>
                                      {
                                        s.price ? <View style={[{height:scaleSize(50),marginRight:scaleSize(30)},styles.flexcenter,]}>
                                                    <Text style={[styles.ftbook,styles.color5d,{lineHeight:scaleSize(50)}]}>{s.price_prefix}${s.price}</Text> 
                                                  </View>:null
                                      }
                                      
                                    </View>
                                    
                                  )})}
                                </View>
                            </View>
                          )})}
                  </ScrollView>
                  }
              </View>

              <View style={[styles.subbtn,styles.flexr,styles.flexb]}>
                <TouchableOpacity
                    activeOpacity = {0.8}
                    style={[styles.onebtnbox,styles.flexcenter,styles.bgee,styles.btnpadding]}
                    onPress={this.setModalVisible.bind(this,false,'modalVisible') }>
                  <Text styles={[styles.color9d,styles.ftmedium,{lineHeight:scaleSize(80)}]} >{i18n.t("Selfording.cancel")}</Text>
                </TouchableOpacity>
                
                <View style={[styles.subbtnbox,styles.flexcenter,styles.flexr]} >

                <View style={[styles.onebtnbox,styles.flexcenter,styles.numbercolor,styles.bgee,styles.btnnum]}>
                    <TouchableOpacity
                        activeOpacity = {0.8}
                        style={{width:scaleSize(40)}}
                        onPress = {this.CartNum.bind(this,count,"reduction")}>
                        <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                          <Image style={{width:scaleSize(22),height:scaleSize(2)}} source={require('../../access/imgs/reduction.png')}/>
                        </View>
                      </TouchableOpacity>
                          <Text style={[styles.ft30,styles.flexy,styles.ftmedium,{color:'#000',width:scaleSize(100),textAlign:'center',lineHeight:scaleSize(80)}]} >{count}</Text>
                      <TouchableOpacity
                        activeOpacity = {0.8}
                        style={{width:scaleSize(40)}}
                        onPress = {this.CartNum.bind(this,count,"add")} >
                        <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                          <Image style={{width:scaleSize(22),height:scaleSize(22)}} source={require('../../access/imgs/add.png')}/>
                        </View>
                      </TouchableOpacity>
                  </View>
                  <TouchableOpacity
                        activeOpacity = {0.8}
                        onPress = {this.Addcart.bind(this,count)}>
                    <View style={[styles.onebtnbox,styles.flexcenter,styles.bg5d,styles.btnpadding]}>
                    <Text style={[styles.ftmedium,styles.colorff,{lineHeight:scaleSize(80)}]} >{i18n.t("Selfording.addtocart")}</Text>
                    </View>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </View>
        </Modal>
      <Animated.View style = {[styles.payPop,{transform:[{scale:payPop}]}]}>
          <View style = {styles.payPopView}>
            <TouchableOpacity
              activeOpacity = {0.9}
              onPressIn = {()=>this.tagglePop(false)}
              style = {styles.popCloseBox}>
              <Image style = {styles.popClose} source  = {require("../../access/imgs/close.png")} />
            </TouchableOpacity>
            <View style = {styles.creditTitle}>
                <FontText font = {'book'} style = {styles.creditTitleText}>Swiper Credit-Card</FontText>
            </View>
            <View style = {styles.creditContent}>
                <MActivityIndicator color = {"#fd265d"} />
                <FontText style = {styles.creditTips} font = {'book'}>{this.renderCreditMessage()}</FontText>
            </View>
          </View>
      </Animated.View>
      </View>
    );
  }
  renderCreditMessage(){
    let {connected,creditpaying} = this.state;
    if(connected){
      if(creditpaying){
        return i18n.t("Selfording.creditpaying")
      }
      return i18n.t("Selfording.swipercredit")
    }else{
      return i18n.t("Selfording.connectswipering")
    }
  }
  tagglePop(taggle = true,cb = null){
    let {payPop} = this.state;
    let {changePlaceloading} = this.props;
    if(taggle){
      this.connectSwiper();
    }else{
      this.setState({
        connected:false
      },()=>{
        SwiperCard.disconnect();
        changePlaceloading(false)
      })
    }
    Animated.timing(payPop, {
      toValue: taggle ? 1 : 0,
      duration:200,
      useNativeDriver: true,
    }).start(()=>{
      cb && cb();
    });
  }
  connectSwiper(){
    let {connect} = this.state;
    if(!connect){
      SwiperCard.connect((res)=>{
        let {isDeviceOpenend, isDeviceConnected} = res;
        if(isDeviceOpenend,isDeviceConnected){
          this.setState({
            connected:true
          })
        }else{
          console.log("connectSwiper .... ");
          setTimeout(() => {
            this.connectSwiper();
          }, 1500);
        }
      })
    }
  }
  renderTabBar(e){//tab项
    return (
      <ScrollableTabBar 
        tabStyle={[styles.barstlyle,styles.flexcenter]}
        style={[styles.barstlyle,{borderWidth: 0}]}
        tabsContainerStyle={[{justifyContent: 'flex-start'},styles.bgf8]}
      />);
  }
  renderItem(item,index){
    let imgUrl = item.gallery.main.name;
    return (
        <View style={[{marginTop:scaleSize(40)},styles.bgff,styles.goodsitem]}> 
         <TouchableOpacity
          activeOpacity = {0.8}
          onPress = {this.Tapgoods.bind(this,item)}>
          <View style={[styles.price,styles.flexcenter]}>
            <Text style={[styles.pricetext,styles.ftmedium,{lineHeight:scaleSize(60)}]}>${item.price}</Text>
          </View>
          <View style={[styles.goodsheder,styles.flexcenter,styles.bgee,styles.ft36]}>
            {
              imgUrl? <Image style={styles.goodsimg} source={{uri:`file://${IMGCACHEPATH}${imgUrl}`}} />:<Text style={[styles.flexy,styles.coloraa]} >No Image</Text>
            }
          </View>
          <View  style={styles.goodsname}>
            <Text style={[styles.ftbook]}>{item.name}</Text>
          </View>
          <View  style={styles.goodsname}>
            <Text style={[styles.subname,styles.ftlight]}>{item.description}</Text>
          </View>
          </TouchableOpacity>
        </View> 
       
    )
}
}

export default connect(
  state => ({
    selfcart: state.selfcart
  }),
  dispatch => bindActionCreators(selfordingActions, dispatch)
)(MenuC);
const styles = StyleSheet.create({
  payPopView:{
    width:scaleSize(1000),
    height:scaleSize(900),
    elevation: 4,  
    shadowColor: '#333',
    shadowOffset: {width:2,height:2},
    borderColor:"#f2f2f2",
    borderWidth:1,
    backgroundColor:"#fefefe",
    borderRadius:4
  }, 
  payPop:{
    justifyContent:"center",
    alignItems:"center",
    position:"absolute",
    left:0,
    top:0,
    right:0,
    bottom:0
  },
  popCloseBox:{
    position:"absolute",
    right:-scaleSize(30),
    top:-scaleSize(30)
  },
  popClose:{
    width:scaleSize(60),
    height:scaleSize(60)
  },
  creditTitle:{
    height:scaleSize(100),
    justifyContent:"center",
    alignItems:"center"
  },
  creditTitleText:{
    fontSize:scaleSize(32),
    color:"#333"
  },
  creditContent:{
    flex:1,
    padding:scaleSize(60),
    justifyContent:"center",
    alignItems:"center"
  },
  creditTips:{
    fontSize:scaleSize(30),
    marginTop:scaleSize(30)
  },
  flexr:{
    flexDirection:"row",
  },
  flexc:{
    flexDirection:"column",
  },
  flexx:{
    alignItems:'center',
  },
  flexy:{
    justifyContent:'center'
  },
  flexb:{
    justifyContent:'space-between'
  },
  flexcenter:{
    justifyContent:'center',
    alignItems:"center",
  },
  pd50:{
    padding:scaleSize(50),
  },
  pd40:{
    padding:scaleSize(40),
  },
  pt50:{
    paddingTop:scaleSize(50),
  },
  pl50:{
    paddingLeft:scaleSize(50), 
  },
  pr50:{
    paddingRight:scaleSize(50), 
  },
  pb50:{
    paddingBottom:scaleSize(50),
  },
  pt40:{
    paddingTop:scaleSize(40),
  },
  pl40:{
    paddingLeft:scaleSize(40), 
  },
  pr40:{
    paddingRight:scaleSize(40), 
  },
  pb40:{
    paddingBottom:scaleSize(40), 
  },
  ft30:{
    fontSize:scaleSize(30),
  },
  ft36:{
    fontSize:scaleSize(36),
  },
  ft40:{
    fontSize:scaleSize(40),
  },
  ft48:{
    fontSize:scaleSize(48),
  },
  ftbold:{
    fontFamily:fontFamily.bold
  },
  ftlight:{
    fontFamily:fontFamily.light
  },
  ftmedium:{
    fontFamily:fontFamily.medium
  },
  ftbook:{
    fontFamily:fontFamily.book
  },
  ft24:{
    fontSize:scaleSize(24),
  },
  flex1:{
    flex: 1,
  },
  colorff:{
    color:'#fff'
  },
  color00:{
    color:'#000'
  },
  color5d:{
    color:'#fd265d'
  },
  color50:{
    color:'#505050'
  },
  color56:{
    color:'#545456'
  },
  color66:{
    color:'#666666'
  },
  color9d:{
    color:'#9b9b9b'
  },
  color72:{
    color:'#cfa972'
  },
  color21:{
    color:'#212121'
  },
  h60:{
    height:scaleSize(60)
  },
  coloraa:{
    color:'#aaa',
  },
  color99:{
    color:'#999'
  },
  bgff:{
    backgroundColor:'#fff'
  },
  bgf8:{
    backgroundColor:'#f8f8f8'
  },
  bg5d:{
    backgroundColor:'#fd265d'
  },
  bg72:{
    backgroundColor:'#cfa972'
  },
  bgbf:{
    backgroundColor:'#bfbfbf'
  },
  bgee:{
    backgroundColor:'#eeeeee'
  },
  borders:{
    borderStyle:"solid",
  },
  bordert:{
    borderTopWidth:scaleSize(1),
  },
  borderb:{
    borderTopWidth:scaleSize(1),
  },
  positionr:{
    position:"relative",
  },
  positions:{
    position:"absolute",
  },
  container:{
    flex: 1,
    position:"relative",
  },
  innerContainer:{
    paddingTop:scaleSize(50),
    paddingLeft:scaleSize(50),
    paddingRight:scaleSize(50),
  },
  checkmodelfooter:{
    height:scaleSize(225),
    borderTopWidth:scaleSize(1),
    borderStyle:"solid",
    borderTopColor:'#d2d2d2',
  },
  herders:{
    width:ScreenWidth-10-scaleSize(50),
    height:scaleSize(80),
    marginLeft:scaleSize(40),
    paddingRight:scaleSize(50),
  },
  circle:{
    width:scaleSize(31),
    height:scaleSize(31),
    borderRadius:scaleSize(31/2),
    marginRight:scaleSize(10),
  },
  addressimg:{
    height:scaleSize(32),
    width:scaleSize(24),
    marginRight:10,
  },
  phoneimg:{
    height:scaleSize(31),
    width:scaleSize(31),
    marginLeft:scaleSize(70),
    marginRight:10,
  },
  checkoutbtn:{
    width:scaleSize(500),
    height:scaleSize(100),
    position:"absolute",
    right:0,
    zIndex:999,
    top:scaleSize(80),
  },
  // viewscroll:{
  //   height:scaleSize(100),
  // },
  barstlyle:{
    overflow:'scroll',
    height:scaleSize(100),
  },
  lineStyle: {
    position:"absolute",
    top:0,
    height: 2,
  },
  goodsitem:{
    paddingTop:scaleSize(70),
    marginLeft:scaleSize(41),
    marginBottom:scaleSize(40),
    width:scaleSize(460),
    flexDirection:'column',
    position:"relative",
  },
  price:{
    backgroundColor:'#fd265d',
    position:"absolute",
    height: scaleSize(60),
    width: scaleSize(150),
    zIndex:9999,
    right:scaleSize(-10),
    top:scaleSize(90),
  },
  pricetext:{
    fontSize:scaleSize(30),
    color:'#fff'
  },
  goodsheder:{
    height:scaleSize(460),
    width:scaleSize(460),
  },
  goodsimg:{
    height:scaleSize(460),
    width:scaleSize(460),
  },
  goodsname:{
    paddingTop:scaleSize(35),
    textAlign:'center',
    fontSize:scaleSize(36),
    color:'#505050',  
  },
  subname:{
    paddingTop:scaleSize(35),
    fontSize:scaleSize(24),
    color:'#666666',
  },
  contbox:{
    width:scaleSize(1500)
  },
  goodsinfo:{
    width:scaleSize(1500),
    height:scaleSize(300),
    marginBottom:scaleSize(60),
    flexDirection:'row'
  },
  seltelimg:{
    height:scaleSize(300),
    width:scaleSize(300),
    marginRight:scaleSize(50),
  },
  subbtn:{
    height:scaleSize(150),
    paddingTop:scaleSize(35),
  },
  onebtnbox:{
    height:scaleSize(80),
    borderStyle:"solid",
    borderColor:'rgba(0,0,0,0)',
    borderWidth:scaleSize(1),
    borderRadius:scaleSize(40),
  },
  cardbtn:{
    height:scaleSize(102),
    borderRadius:scaleSize(51),
    backgroundColor:'#fd265d'
  },
  numbercolor:{
    flexDirection:'row',
    borderWidth:scaleSize(1),
    borderStyle:"solid",
    marginRight:scaleSize(60)
  },
  subbtnbox:{
    height:scaleSize(80),
  },
  nosektel:{
    width:scaleSize(212),
    marginRight:scaleSize(30),
    marginTop:scaleSize(20),
  },
  btnpadding:{
    paddingLeft:scaleSize(50),
    paddingRight:scaleSize(50)
  },
  btnnum:{
    paddingLeft:scaleSize(15),
    paddingRight:scaleSize(15)
  },
  emptyText:{
    color:"#464646",
    fontSize: 26,
    fontWeight: 'bold',
  },
});
 